<script setup lang="ts">
import {getCommentById} from "../api/order.ts";
import {defineProps, ref} from 'vue'
import {parseTime} from "../utils";

const userName = ref('')
const score = ref()
const comment = ref()
const createTime = ref('')
const orderId = ref()
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const props = defineProps<{
  id : number,
}>()
orderId.value = props.id

getCommentById(orderId.value).then(res=>{
  userName.value = res.data.result.userName
  score.value = res.data.result.rating
  comment.value = res.data.result.commentContent
  createTime.value = res.data.result.createTime
})
</script>

<template>
  <el-card>
    <el-space  spacer="|">
    <el-text size = "large">{{userName}}</el-text>
    <el-text >{{parseTime(createTime)}}</el-text>
    </el-space>
    <el-divider></el-divider>
    <el-rate
        v-model = "score"
        disabled
        show-score
        text-color="#99A9BF"
        score-template="{value} points"
        :colors="colors">
    </el-rate>
    <div>
      <el-text size = "large">{{ comment }}</el-text>
    </div>

  </el-card>

</template>

<style scoped>

</style>